<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        font: 14px/1.5;
        height: 1100px;
        min-width: 1226px;
        color: #333;
    }
    a {
        text-decoration: none;
    }
    li {
        list-style-type: none;
    }
    .clearfix::before, .clearfix::after{
        content: '';
        display: table;
        clear: both;
    }
    .w{
        width: 1226px;
        margin: 0 auto;
    }
    /* 顶部导航条 */
    .topbar-wrapper{
        width: 100%;
        background-color: #333;
        height: 40px;
        line-height: 40px;
    }
    .topbar a{
        font-size: 12px;
        color: #b0b0b0;
        display: block;
    }
    .topbar a:hover{
        color: #fff;
    }
    .line{
        font-size: 12px;
        color: #424242;
        margin: 0 8px;
    }
    /* 设置左侧导航栏 */
    .topbar-left, .topbar-left>li{
        float: left;
    }
    .shopping-cart, .user-info, .user-info>li{
        float: right;
    }
    /* 设置下载app的下拉二维码 */
    .app .qrcode{
        position: absolute;
        left: -40px;
        width: 124px;
        height: 0;
        overflow: hidden;
        background-color: #fff;
        line-height: 1;
        text-align: center;
        box-shadow: 0 0 10px rgba(100, 6, 61, 0.9);
        /* 滑动效果 */
        transition: height 3s;
        z-index: 50;
    }
    .app:hover .qrcode, .app:hover::after{
        display: block;
        height: 148px;
    }
    .app .qrcode img{
        width: 90px;
        height: 90px;
        margin: 10px 17px;
    }
    .app .qrcode span{
        color: #000;
        font-size: 1px;
    }
    .app{
        position: relative;
        text-align: center;
    }
    .app::after{
        display: none;
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border: 5px solid transparent;
        border-top: none;
        border-bottom-color: rgb(241, 235, 235);
    }
    .shopping-cart a{
        width: 120px;
        background-color: #424242;
        text-align: center;
    }
    .shopping-cart i{
        margin-right: 8px;
    }
    .shopping-cart{
        margin-left: 26px;
    }
    .shopping-cart:hover a{
        background-color: #fff;
        color: #ff6700;
    }
    /* ===================== */
    .header-wrapper{
        position: relative;
    }
    .header{
        height: 100px;
        background-color: rgb(255, 255, 255);
        padding: 22px auto;
    }
    .header .logo{
        float: left;
        margin-top: 22px;
        width: 55px;
        height: 55px;
        position: relative;
        overflow: hidden;
        text-indent: -99999px;
    }
    .header .logo a{
        position: absolute;
        width: 55px;
        height: 55px;
        background-color: #ff6700;
        background-image: url(https://img0.baidu.com/it/u=2830816980,1162416008&fm=26&fmt=auto);
        background-position: center;
        transition: left .5s;
        left: 0;
    }
    .header>.logo>.home{
        left: -55px;
        background-image: url(https://img0.baidu.com/it/u=2830816980,1162416008&fm=26&fmt=auto);
    }
    .header .logo:hover .mi{
        left: 55px;
    }
    .header .logo:hover .home{
        left: 0;
    }
    /* ============= */
    /* 设置中间的导航条 */
    .header .nav-wrapper{
        float: left;
        margin-left: 7px;
    }
    .nav>li{
        float: left;
    }
    .all-goods-wrapper{
        position: relative;
    }
    .left-menu{
        widows: 234px;
        background-color: rgba(0, 0, 0, .3);
        position: absolute;
        left: -120px;
        z-index: 20;
        line-height: 1;
        padding: 20px 0;
    }
    .nav li .a-left-menu{
        display: block;
        height: 42px;
        line-height: 42px;
        color: white;
        padding: 0 30px;
        margin-right: 0;
        font-size: 14px;
    }
    .nav li .a-left-menu:hover{
        color: white;
        background-color: #ff6700;
    }
    .nav-wrapper .nav{
        background-color: rgb(255, 254, 254);
        height: 100px;
        line-height: 100px;
        padding-left: 58px;
    }
    .nav li a{
        display: block;
        font-size: 16px bold;
        margin-right: 20px;
        color: #000;
    }
    .nav li a:hover{
        color: #ff6700;
    }
    .nav>.all-goods-wrapper>.all-goods:first-child{
        visibility: hidden;
    }
    .nav .good-info{
        height: 0;
        overflow: hidden;
        width: 100%;
        background-color: rgb(252, 252, 252);
        position: absolute;
        top: 100px;
        left: 0;
        transition: height .5s;
        z-index: 99;
    }
    .nav li:not(:nth-child(1)):not(:nth-child(9)):not(:nth-child(10)):hover ~ .good-info, .good-info:hover{
        height: 228px;
        border-top: 1px solid #000;
        box-shadow: 0 6px 5px rgba(0, 0, 0, .5);
    }
    /* 右侧搜索框 */
    .search-wrapper{
        float: right;
        widows: 296px;
        height: 50px;
        margin-top: 25px;
    }
    .search-wrapper .search-inp{
        border: none;
        width: 244px;
        float: left;
        height: 50px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid rgb(224, 224, 224);
        font-size: 16px;
        outline: none;
    }
    .search-wrapper .search-inp:focus, .search-wrapper .search-inp:focus +.search-btn{
        border-color: #ff6700;
    }
    .search-wrapper .search-btn{
        float:left;
        height: 50px;
        width: 52px;
        padding: 0px;
        border: none;
        color: #616161;
        font-size: 16px;
        border: 1px solid rgb(224, 224, 224);
        border-left: none;
        outline: none;
    }
    .search-wrapper .search-btn:hover{
        background-color: #ff6700;
        color: #fff;
        border:none
    }
    /* 中间部分 */
    .banner{
        position: relative;
        height: 460px;
    }
    .banner .img-list li{
        position: absolute;
    }
    .banner img{
        widows: 100%;
    }
    .point{
        position: absolute;
        bottom: 22px;
        right: 35px;
    }
    .point a{
        float: left;
        width: 6px;
        height: 6px;
        background-color: rgba(0, 0, 0, .4);
        border: 2px rgba(225, 255, 255, .4);
        border-radius: 50%;
        margin-left: 6px;
    }
    .point a:hover, .point a:active{
        background-color: #fff;
        border: 2px rgba(0, 0, 0, .4) solid;
    }
    .point a.hover, .point a.active{
        background-color: #fff;
        border: 2px rgba(0, 0, 0, .4) solid;
    }
    .arrow a{
        width: 41px;
        height: 69px;
        background-color: rgb(213, 218, 218);
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/19f12ce5a1770c2a23188f1055258967.jpg?thumb=1&w=1533&h=575&f=webp&q=90);
    }
    .arrow .pre-arrow:hover{
        background-position: -84px 0;
    }
    .arrow .next-arrow{
        right: 0;
        background-position: -42px;
    }
</style>

<body>
    <div class="topbar-wrapper">
        <div class="topbat w clearfix">
            <div class="topbar">
                <ul class="topbar-left">
                    <li><a href="javascript:;">小米商城</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">MIUI</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">LoT</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">云服务</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">金融</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">商品</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">小爱开放平台</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">企业团购</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">资质证明</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">协议规则</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;" class="app">下载app
                        <!-- 添加弹出层 -->
                        <div class="qrcode">
                            <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米二维码">
                            <span>小米商城app</span>
                        </div>
                    </a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">智能生活</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">select location</a></li>
                    <li class="line">|</li>
                </ul>
                <div class="shopping-cart">
                    <a href="javascript:;"><i class='fa fa-cart-arrow-down'></i>购物车（100）</a>
                </div>
                <ul class="user-info">
                    <li><a href="javascript:;">登录</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">注册</a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">消息通知</a></li>
                    <li class="line">|</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 头部的外部容器 -->
    <div class="head-wapper clearfix">
        <div class="header w">
            <h1 class="logo" title="xiaomi">小米官网
                <a href="D:\系统办公workplace\html文件\小米首页.html" class="home"></a>
                <a href="D:\系统办公workplace\html文件\小米首页.html" class="mi"></a>
            </h1>
            <!-- 中间的导航条容器 -->
            <div class="nav-wrapper">
                <ul class="nav clearfix">
                    <li class="all-goods-wrapper">
                        <a href="javascript:;" class="all-goods">全部商品分类</a>
                        <ul class="left-menu">
                            <li>
                                <a href="#" class="a-left-menu">手机 电话卡
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">电视 盒子
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">笔记本 平板
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">家电 插线板
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">出行 穿戴
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">智能 路由器
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">电源 配件
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">健康 儿童
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">耳机 音箱
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="a-left-menu">生活 箱包
                                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="javascript:;">小米手机</a></li>
                    <li><a href="javascript:;">Redmi红米</a></li>
                    <li><a href="javascript:;">电视</a></li>
                    <li><a href="javascript:;">笔记本</a></li>
                    <li><a href="javascript:;">家电</a></li>
                    <li><a href="javascript:;">路由器</a></li>
                    <li><a href="javascript:;">智能硬件</a></li>
                    <li><a href="javascript:;">服务</a></li>
                    <li><a href="javascript:;">社区</a></li>
                    <!-- 创建弹出层 -->
                    <div class="good-info">

                    </div>
                </ul>
            </div>
            <!-- 创建 搜索框的容器 -->
            <div class="search-wrapper">
                <form action="#" class="search">
                    <input type="text" class="search-inp">
                    <button class="search-btn">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
    <!-- 中间显示部分 -->
    <div class="banne-wrapper w">
        <div class="banner">
            <ul class="img-list" id="img-list">
                <li>
                    <a href="#">
                        <img id="img1" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340" alt="banner1" style="display: block;">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img id="img1" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340" alt="banner2" style="display: none;">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img id="img1" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340" alt="banner3" style="display: none;">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img id="img1" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340" alt="banner4" style="display: none;">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img id="img1" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340" alt="banner5" style="display: none;">
                    </a>
                </li>
            </ul>
            <!-- 小点点 -->
            <div class="point">
                <a id="pointc" class="hover" href="javascript:;"></a>
                <a id="pointc" href="javascript:;"></a>
                <a id="pointc" href="javascript:;"></a>
                <a id="pointc" href="javascript:;"></a>
                <a id="pointc" href="javascript:;"></a>
            </div>
            <!-- 小箭头 -->
            <div class="arrow">
                <a href="javascript:;" id="pre-arrow" class="pre-arrow"></a>
                <a href="javascript:;" id="pre-arrow" class="pre-arrow"></a>
            </div>
        </div>
    </div>

    <!-- 固定定位的工具条 回到顶部的元素 -->
    <div class="to-top">
        <a href="javascript:;"><i class="fa fa-phone"></i></a>
        <a href="javascript:;"><i class="fa fa-user-o"></i></a>
        <a href="javascript:;"><i class="fa fa-wrench"></i></a>
        <a href="javascript:;"><i class="fa fa-headphones"></i></a>
    </div>
    <!-- ad广告容器 -->
    <div class="ad w">
        <ul class="shortcut">
            <li><a href="#">
                <i class="fa fa-clock-o"></i>
                小米秒杀
            </a></li>
            <li><a href="#">
                <i class="fa fa-building"></i>
                企业团购
            </a></li>
            <li><a href="#">
                <i class="fa fa-id-card-o"></i>
                米粉卡
            </a></li>
            <li><a href="#">
                <i class="fa fa-money"></i>
                以旧换新
            </a></li>
            <li><a href="#">
                <i class="fa fa-share-square"></i>
                话费充值
            </a></li>
        </ul>
        <ul class="ad-img">
            <li>
                <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340" alt="show1"></a>
            </li>
            <li>
                <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fce474f4024b96545959ccd45b7e50f3.jpg?w=632&h=340" alt="show2"></a>
            </li>
            <li>
                <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340" alt="show3"></a>
            </li>
        </ul>
    </div>

</body>
</html>